blob: 01a35b3c9a5295c9f7cd4bc7d0b5f60c04c42962 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<script lang="ts">
import Itinerary from '$lib/Itinerary.svelte';
import type { Itinerary as ItineraryType } from '$lib/motis-types';
import Page from '$lib/Page.svelte';
import { page } from '$app/state';
import { normalisePlaceName } from '$lib/aliases';
import Titlebar from '$lib/Titlebar.svelte';
import { S } from '$lib';
import _itinerary from './sampleData.json';
import Loader from '$lib/Loader.svelte';
import LineGlyph from '$lib/assets/LineGlyph.svelte';
let itinerary = $state(_itinerary as unknown as ItineraryType | null);
let fromName = $derived(
itinerary ? normalisePlaceName(itinerary.legs[0].from.name) : ''
);
let toName = $derived(
itinerary
? normalisePlaceName(itinerary.legs[itinerary.legs.length - 1].to.name)
: ''
);
let routeShortName = $derived(itinerary?.legs?.[0]?.routeShortName);
let title = $derived(
itinerary
? `${routeShortName ? `${routeShortName} from ` : ''}${fromName} to ${toName}`
: 'Route ' + page.params.id
);
</script>
<svelte:head>
<meta name="route:id" content={page.params.id} />
</svelte:head>
<Page title={`${title} - Fahrplan`} class="p-8">
<div class={S.window_content_fullscreen}>
<Titlebar>
<div class="w-full">
<!-- FIXME: I'm not sure I'm satisfied with the design of this part -->
<div
class="{S.title} rounded-xl w-full text-center flex items-center justify-between gap-2"
>
<LineGlyph
currentColor="#fff"
kind={routeShortName}
negative={false}
dark
/>
<p class="inline cursor-default">
<span class="font-medium">
{fromName}
</span>
<span class="font-[450]"> to </span>
<span class="font-medium">
{toName}
</span>
</p>
<div class="opacity-0 pointer-events-none" aria-hidden="true">
<!-- make it properly centered -->
<LineGlyph
currentColor="#fff"
kind={routeShortName}
negative={false}
dark
/>
</div>
</div>
<!-- <div
class="h-1 mt-2 -mb-3 bg-gradient-to-b from-[#111] to-[#1110]"
></div> -->
</div>
</Titlebar>
<div class="w-full h-[2px] rounded-[2px] relative">
<Loader kind="hidden" />
</div>
<div class="p-3">
<Itinerary {itinerary} />
</div>
</div>
</Page>
|
